<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%- locals.title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/public/favicon.png">
    <!-- Bootstrap -->
    <link href="http://cdn.staticfile.org/twitter-bootstrap/3.0.0-rc2/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="http://cdn.staticfile.org/prettify/r298/prettify.min.css" rel="stylesheet" media="screen">
    <!-- JavaScript plugins (requires jQuery) -->
    <script src="http://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
    <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="CNPM" />
    <style>
      a{color:#09f;}
      code{color:#080;}
      pre{line-height: 1.4;}
      pre.prettyprint{padding: 10px;}
      #tagline{display:inline;}
      /*#wrapper{padding:5% 8%;min-width:480px;}*/
      #tagline{font:0.8em serif;color:#888;display:inline-block;margin:0.1em 0 1.2em;}
      #fork{position:fixed;top:0;right:0;_position:absolute;}
      #search-input {width: 600px; height: 50px; display: inline; font-size: 30px;}
      #content-header {margin: 20px 0 50px 0;}
      .user .avatar {
        width: 32px;
        height: 32px;
        margin-bottom: 3px;
      }
      table.downloads td.count {
        text-align: right;
      }

      .nav-tabs{margin:20px 0;}
      .nav-cont{display:none;}
      .nav-cont.active{display:block;}
    </style>
    <script>
      $(function () {
        $('#search-input').keypress(function (e) {
          if(e.keyCode !== 13) {
            return;
          }
          var val = $(this).val().trim();
          if (val) {
            return location.href = '/browse/keyword/' + val;
          }
        });

        $(".nav-tabs li").each(function (index) {
          $(this).data("index", index);
        })
        .on("click", function (e) {
          e.preventDefault();
          $(".nav-tabs li.active,.nav-cont.active").removeClass("active");
          $(this).addClass("active");
          $(".nav-cont").eq($(this).data("index")).addClass("active");
        });
      });
    </script>
  </head>
  <body>
    <div class="container">
      <div id="content-header">
        <a href="/"><img src="{{logoURL}}"></a>
        <input type="text" id="search-input" class="form-control" placeholder="Search Packages">
      </div>
      <div id="content-body"><%- locals.body %></div>
    <div class="bottom">
      <hr/>
      <p>
        {{footer}}
      </p>
      <a href="https://github.com/cnpm/cnpmjs.org" id="fork" target="_blank">
        <img alt="Fork me on GitHub" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
    </a>
    </div>
    </div>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.staticfile.org/twitter-bootstrap/3.0.0-rc2/js/bootstrap.min.js"></script>

    <!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
    <script src="http://cdn.staticfile.org/respond.js/1.2.0/respond.min.js"></script>

    <script src="http://cdn.staticfile.org/prettify/r298/prettify.min.js"></script>

    <!-- Specific to this page -->
    <script>
    $(function () {
      $('pre code').parent().addClass('prettyprint');
      prettyPrint();
      $('table').addClass('table table-bordered table-striped');
    });
    </script>
  </body>
</html>
